// 提供的数据
const obj = {
  success: true,
  code: 10000,
  data: [
    {
      id: 1,
      username: '管理员',
      workNumber: '10000',
      time: '2022-10-24',
    },
    {
      id: 2,
      username: '孙财',
      workNumber: '10001',
      time: '2022-09-24',
    },
    {
      id: 3,
      username: '罗晓晓',
      workNumber: '10002',
      time: '2022-08-24',
    },
    {
      id: 4,
      username: '文吉星',
      workNumber: '10003',
      time: '2022-08-25',
    },
    {
      id: 5,
      username: '巴思慧',
      workNumber: '10004',
      time: '2022-08-24',
    },
    {
      id: 6,
      username: '乔海',
      workNumber: '10005',
      time: '2022-08-22',
    },
    {
      id: 7,
      username: '董昊空',
      workNumber: '10006',
      time: '2022-08-24',
    },
    {
      id: 8,
      username: '周乐天',
      workNumber: '10007',
      time: '2022-07-24',
    },
    {
      id: 9,
      username: '吕勇锐',
      workNumber: '10008',
      time: '2022-08-17',
    },
    {
      id: 10,
      username: '袁永安',
      workNumber: '10009',
      time: '2022-08-24',
    },
  ],
  message: '获取员工列表成功',
}

// 功能一. 消息提示框
function showToast ({message, time = 3000} = {}) {
  // 追加提示框节点到页面
  const toastDiv = document.createElement('div')
  toastDiv.className = 'el-message el-message--success slideDown'

  toastDiv.innerHTML = `
  <i class="el-message__icon el-icon-success"></i>
  <p class="el-message__content">${ message }</p>
  `

  document.body.append(toastDiv)

  setTimeout(() => {
    toastDiv.remove()
  }, time)
}

// showToast({message: '登录成功'})




// 获取表单元素
const tbody = document.querySelector('#tbody')
const btnAdd = document.querySelector('#btn-add')
const btnOK = document.querySelector('#btn-ok')

// 确认删除
const delOk = document.querySelector('#del-ok')

// 模态框表单系列元素
const form = document.querySelector('#form')
const username = form.querySelector('.username')
const workNumber = form.querySelector('.workNumber')
const time = form.querySelector('.time')

// 模态框标题
const dialogTitle = document.querySelector('#my-dialog-title')

// todo 渲染功能
function render (data=[]) {
  // 按入职时间做升序排序 → sort((a, b) => {return a-b})
  arr = data.sort((a, b) => {
    return new Date(a.time) - new Date(b.time)
  })
  // console.log(data)
  

  let str = data.map(item => {
    const {id, username, workNumber, time} = item
    return `
    <tr class="el-table__row">
      <td class="is-center">
        <div class="cell"><span class="username">${username.substring(username.length-1)}</span></div>
      </td>
      <td>
        <div class="cell">${username}</div>
      </td>
      <td>
        <div class="cell">${workNumber}</div>
      </td>
      <td>
        <div class="cell">${time}</div>
      </td>
      <td>
        <div class="cell">
          <button type="button" class="el-button hm-text btn-edit" data-id="${id}">编辑</button>
          <button type="button" class="el-button hm-text btn-del" data-id="${id}">删除</button>
        </div>
      </td>
    </tr>
    `
  }).join('')
  tbody.innerHTML = str
}

// obj是一个对象，只使用data对象数组 - 提前解构 -- 对象数组的数据名叫data ，改名需要写法 data: 新名
let {data: arr} = obj
render(arr)


// 删除功能 : 如果类名包含btn-del执行删除功能 
// 找到这个员工干掉 → 员工的唯一标识 id
// 找到不是这个id的重新渲染  -- 选择 → 找出多个满足条件的员工 → 数组方法里面：找多个，返回数组 -- filter
let id = ''
tbody.addEventListener('click', function(e) {
  id = e.target.dataset.id
  if (e.target.classList.contains('btn-del')) {
    // console.log('删除')
    const newArr = arr.filter((item) => {
      // 不能判断类型，数据里面的id是数字，这里获取到的id是字符串
      return item.id != id
    })
    render(newArr)
    id = ''
  }

  // 编辑按钮点击
  if (e.target.classList.contains('btn-edit')) {
    dialog.show()
    username.value = arr.find(item => item.id == id).username
    workNumber.value = arr.find(item => item.id == id).workNumber
    time.value = arr.find(item => item.id == id).time
    dialogTitle.innerHTML = '编辑员工信息'
  }
})

// 添加或编辑 - 共用弹窗-模态框
const modal = document.querySelector('#modal')
const dialog = new A11yDialog(modal)
btnAdd.addEventListener('click', function () {
  dialog.show()
  dialogTitle.innerHTML = '添加员工信息'
})

// btnOK点击的时候执行添加或编辑的功能 → 如果有id值说明找到了一个员工要执行编辑功能；否则没有id值的话直接新增员工
// 注意：为了不影响后续添加和编辑的id判断 → 编辑完和删除完都把id=''
btnOK.addEventListener('click', function () {
  if (id) {
    // console.log('编辑')
    arr.find(item => item.id==id).username = username.value
    arr.find(item => item.id==id).time = time.value
    dialog.hide()
    username.value =''
    workNumber.value = ''
    time.value = ''
    render(arr)
    id = ''
    
  } else {
    // console.log('添加')
    arr.unshift({
      id: +new Date(),
      username: username.value,
      workNumber: +arr[arr.length-1].workNumber+1,
      time: time.value
    })
    render(arr)
    dialog.hide()
    username.value =''
    time.value = ''
  }
})

// 添加： push unshift ：id 是时间戳；工号：最后一个人的工号+1； → 渲染新数组 → 关闭弹窗

// 编辑：从数组里面先找到这个员工 find按id查找，把员工的数据赋值到每个表单输入框 → 确定按钮 → 把新的数据写入到数组
// 设置数组里面id值是用户新输入的；名字是用户新输入的.... → 渲染新数据 → 关闭弹窗


